Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
click each button in order
Add Borders
Enable Mask
Add Background
Author: https://www.pexels.com/@pixabay License: https://www.pexels.com/license/
Author: https://www.pexels.com/@pixabay License: https://www.pexels.com/license/
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } body, html { width:100%; height:100%; } body { background:black; margin:0; overflow:hidden; display:flex; justify-content:start; align-items:center; flex-direction:column; color:white; font-family:sans-serif; } h2 { text-align:center; } #svg { width:100%; background:black; } #normal { opacity:0; } #white { opacity:1; } #border0, #border1, #border2 { opacity:0; } button { padding:1em; border:none; border-radius:0.5em; cursor:pointer; } .nav { background:black; padding:1em; }
console.log("Event Fired") for (let i = 0; i < 3; i++) { var newBorder = border.cloneNode(true); newBorder.id = "border" + i; mask.appendChild(newBorder); } let targets = document.querySelectorAll(".border"); let numberOfTargets = targets.length; /* change these values */ let ease = "power1.in"; let stagger =2.4; let duration = 8; // seamless loops secret sauce :) let repeatDelay = stagger * numberOfTargets - duration; const t = gsap.timeline({id:"awesome"}).fromTo( ".border", { scale: 0, transformOrigin: "50% 50%" }, { scale: 8.1, duration: duration, ease: ease, stagger: { each: stagger, repeatDelay: repeatDelay, repeat: 10 } } ); GSDevTools.create({ animation: t }); // learn everything I know about GreenSock and SVG Animation // Unlock over 250 premium video lessons today // https://www.creativecodingclub.com/bundles/creative-coding-club // I just show and hide things to illustrate the effect // make additional borders visible addBorders.addEventListener("click", () => gsap.set("#border0, #border1, #border2", {opacity:0.9})) // I hide a white rectangle inside the the group that is masked // the white rectangle just covers up the image enableMask.addEventListener("click", () => gsap.set("#white", {opacity:0})) //set normal sized image to be visible addBg.addEventListener("click", () => gsap.set("#normal", {opacity:1})) // this demo has ONLY the animation, no masking or interactive stuff // https://codepen.io/snorkltv/pen/NWBpxVm?editors=0110